<template>
  <div class="app-container">
    <h1>教师管理考试界面</h1>
    <el-button type="primary" size="small" @click="addTest()">添加考试安排</el-button>
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="考试名称" width="150">
        <template slot-scope="scope">
          {{ scope.row.exam_name }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.start_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考试时长" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.exam_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考试总分" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.score }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="400">
        <template slot-scope="scope">
          <span>{{ scope.row.pubilsh }}</span>
          <el-button v-if="scope.row.has_paper==0" @click="addPaper(scope.row.test_id)">添加试卷</el-button>
          <el-button v-if="scope.row.has_paper==1" @click="showPaper(scope.row.test_id)">查看试卷</el-button>
          <el-button v-if="scope.row.has_paper==1&&scope.row.publish==0" @click="Publish(scope.row.test_id)">发布考试</el-button>
          <el-button v-if="scope.row.has_paper==1&&scope.row.publish==1&&scope.row.finish != 1" @click="unPublish(scope.row.test_id)">取消发布</el-button>
          <el-button v-if="scope.row.has_paper == 1 && scope.row.publish == 1 && scope.row.finish == 1" @click="scorePaper(scope.row.test_id)">查看成绩</el-button>
          <!-- <el-button @click="changePaper(scope.row.test_id, scope.row.exam_time)">修改信息</el-button> -->
          <el-button @click="deletPaper(scope.row.test_id)">删除考试</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加考试安排 -->
    <el-dialog :visible.sync="addTestShow">
      <h3>添加考试安排</h3>
      <h5>考试名称</h5>
      <el-input
        v-model="exam_name"
        placeholder="请输入考试名称"
        name="exma_name"
        type="text"
        tabindex="1"
        auto-complete="on"
      />
      <h5>考试时长</h5>
      <el-input
        v-model="exam_time"
        placeholder="请输入考试时长，单位为分钟"
        name="exma_time"
        type="text"
        tabindex="1"
        auto-complete="on"
      />
      <h5>考试开始时间</h5>
      <el-date-picker
        v-model="startData"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
      />
      <el-time-picker
        v-model="startTime"
        value-format=" HH:mm:ss"
        placeholder="任意时间点"
      />
      <h5>考试结束时间</h5>
      <el-date-picker
        v-model="endData"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
      />
      <el-time-picker
        v-model="endTime"
        value-format=" HH:mm:ss"
        placeholder="任意时间点"
      />
      <br>
      <el-button type="primary" @click="handleAdd()">提交</el-button>
    </el-dialog>
    <!-- 添加试卷 -->
    <el-dialog :visible.sync="addPaperShow">
      <h5>采用excel模板导入试卷，请按照模板上试卷信息，否则会导致试卷导入失败</h5>
      <img src="@/assets/试卷模板.png" width="100%">
      <el-upload class="upload-demo" action="" :on-change="handleChange" :show-file-list="false" :auto-upload="false">
        <el-button type="primary" size="small" onclick="">导入数据</el-button>
        {{ uploadMessage }}
      </el-upload>
      <!-- <el-button @click="handlePapers()">添加试卷</el-button> -->
    </el-dialog>
    <!-- 查看试卷 -->
    <el-dialog :visible.sync="PaperShow">
      <h6>查看试卷</h6>
      <div v-for="(item) in title.one_select">
        <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
        <label>A {{ item.opt1 }}</label>
        <label>B {{ item.opt2 }}</label>
        <label>C {{ item.opt3 }}</label>
        <label>D {{ item.opt4 }}</label>
        <h6>答案 {{ item.answer }}</h6>
      </div>
      <div v-for="(item) in title.multi_select">
        <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
        <label>A {{ item.opt1 }}</label>
        <label>B {{ item.opt2 }}</label>
        <label>C {{ item.opt3 }}</label>
        <label>D {{ item.opt4 }}</label>
        <h6>答案 {{ item.answer }}</h6>
      </div>
      <div v-for="(item) in title.fill_blank">
        <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
        <label>{{ item.opt4 }}</label>
        <h6>答案 {{ item.answer }}</h6>
      </div>
      <div v-for="(item) in title.judgement">
        <h4><span>{{ item.number }}</span>({{ item.score }}分) {{ item.title }}</h4>
        <label>yes</label>
        <label>no</label>
        <h6>答案 <span v-if="item.answer=='0'">no</span> <span v-if="item.answer=='1'">no</span></h6>
      </div>
    </el-dialog>
    <!-- 成绩展示 -->
    <el-dialog :visible.sync="scoreShow">
      <el-table
        :data="scoreList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="ID" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="学生名字" width="">
          <template slot-scope="scope">
            {{ scope.row.studentName }}
          </template>
        </el-table-column>
        <el-table-column label="分数" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.score }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { teacherGetTests, teacherAddtest, teacherAddPaper, teacherGetPaper, teacherPublishPaper, teacherUnPublishPaper, teacherDeletPaper, teacherPaperScore } from '@/api/paper'
// import XLSX from 'xlsx'

export default {
  data() {
    return {
      list: null,
      tableData: [],
      fileContent: '',
      file: '',
      data: '',
      addTestShow: false,
      addPaperShow: false,
      PaperShow: false,
      scoreShow: false,
      startTime: '',
      endTime: '',
      startData: '',
      endData: '',
      exam_name: '',
      exam_time: '',
      paperDetil: {
        one_select: [],
        multi_select: [],
        fill_blank: [],
        judgement: []
      },
      uploadMessage: '',
      addID: '',
      title: {},
      scoreList: []
    }
  },
  created() {
    teacherGetTests({ c_id: this.$route.query.c_id }).then(response => {
      this.list = response.exams
      console.log(this.list)
    })
  },
  methods: {
    // 读入Excel文件内容： 核心部分代码(handleChange 和 importfile)
    handleChange(file) {
      this.fileContent = file.raw
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
      if (this.fileContent) {
        if (fileType == 'xlsx' || fileType == 'xls') {
          this.importfile(this.fileContent)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },
    importfile(obj) {
      const reader = new FileReader()
      const _this = this
      reader.readAsArrayBuffer(obj)
      reader.onload = function() {
        const buffer = reader.result
        const bytes = new Uint8Array(buffer)
        const length = bytes.byteLength
        let binary = ''
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        const XLSX = require('xlsx')
        const wb = XLSX.read(binary, {
          type: 'binary'
        })
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        this.data = [...outdata]
        const arr = []
        this.data.map(v => {
          const obj = {}
          // 换成你的字段名称
          // obj.name: 字段名 ， v.姓名：Excel中表单标题行名
          obj.number = v.number
          obj.title = v.title
          obj.opt1 = v.opt1
          obj.opt2 = v.opt2
          obj.opt3 = v.opt3
          obj.opt4 = v.opt4
          obj.answer = v.answer
          obj.kind = v.kind
          obj.score = v.score
          obj.publish = '0'
          if (obj.kind == 0) {
            _this.paperDetil.one_select.push(obj)
          } else if (obj.kind == 1) {
            _this.paperDetil.multi_select.push(obj)
          } else if (obj.kind == 2) {
            _this.paperDetil.fill_blank.push(obj)
          } else if (obj.kind == 3) {
            _this.paperDetil.judgement.push(obj)
          }
          arr.push(obj)
        })
        // if (_this.paperDetil) {
        //   _this.uploadMessage = '获取数据成功！'
        // }
        // _this.tableData换成你要导入的table表
        _this.handlePapers()
        _this.paperDetil = {
          one_select: [],
          multi_select: [],
          fill_blank: [],
          judgement: []
        }
        _this.tableData = _this.tableData.concat(arr)
      }
    },
    addTest() {
      this.addTestShow = true
    },
    handleAdd() {
      var test = {
        c_id: this.$route.query.c_id,
        start_time: this.startData + this.startTime,
        end_time: this.endData + this.endTime,
        exam_time: this.exam_time,
        exam_name: this.exam_name,
        type: '0'
      }
      teacherAddtest(test).then(response => {
        console.log(response)
      })
      teacherGetTests({ c_id: this.$route.query.c_id }).then(response => {
        this.list = response.exams
        console.log(this.list)
      })
      this.addTestShow = false
    },
    addPaper(test_id) {
      this.addPaperShow = true
      this.addID = test_id
    },
    handlePapers() {
      teacherAddPaper({ test_id: this.addID, paper: this.paperDetil }).then(response => {
        console.log(response)
        this.addPaperShow = false
      })
      teacherGetTests({ c_id: this.$route.query.c_id }).then(response => {
        this.list = response.exams
        console.log(this.list)
      })
    },
    showPaper(t_id) {
      this.PaperShow = true
      teacherGetPaper({ test_id: t_id }).then(response => {
        this.title = response.paper
        console.log(response)
      })
    },
    Publish(t_id) {
      teacherPublishPaper({ test_id: t_id, c_id: this.$route.query.c_id }).then(response => {
        if (response.code == 200) {
          this.$message('发布成功！')
          teacherGetTests({ c_id: this.$route.query.c_id }).then(response => {
            this.list = response.exams
            console.log(this.list)
          })
        }
      })
    },
    unPublish(t_id) {
      teacherUnPublishPaper({ test_id: t_id, c_id: this.$route.query.c_id }).then(response => {
        if (response.code == 200) {
          this.$message('取消发布成功！')
          teacherGetTests({ c_id: this.$route.query.c_id }).then(response => {
            this.list = response.exams
          })
        }
      })
    },
    deletPaper(t_id) {
      teacherDeletPaper({ test_id: t_id }).then(response => {
        if (response.code == 200) {
          this.$message('删除考试安排成功！')
          teacherGetTests({ c_id: this.$route.query.c_id }).then(response => {
            if (response.exams == undefined) {
              this.list = []
            } else {
              this.list = response.exams
            }
          })
        }
      })
    },
    scorePaper(t_id) {
      this.scoreShow = true
      teacherPaperScore({ test_id: t_id, c_id: this.$route.query.c_id }).then(response => {
        this.scoreList = response.score
        console.log(response)
      })
    }
  }
}
</script>

